<template>
<div class="log-panel">
  <Spin v-if="loading" fix></Spin>
  <Row :gutter="10">
    <Col span="4" v-for="type in inspectTypeList" :key="type.inspectTypeId">
      <Card @click.native="goLogType(type)" v-if="type.inspectTypeName" class="inspect-item">
        <img class="inspect-logo" :src="type.inspectTypeName | nameImg" />
        <h4 class="inspect-name">{{type.inspectTypeName | nameSuffix}}</h4>
        <p class="inspect-info">日志数：{{type.num}}</p>
      </Card>
    </Col>
  </Row>
</div>
</template>

<script>
import Fetch from '@/api/request'
export default {
  name: 'InspectLogPanel',
  data() {
    return {
      inspectTypeList: [],
      loading: true
    }
  },
  mounted() {
    Fetch.get({
      url: '/api/inspect/recordPanel',
      done: () => {
        this.loading = false
      }
    }).then((data) => {
      this.inspectTypeList = data.data
      for (let i = 0; i < data.data.length; i++) {
        const inspect = data.data[i]
        // 目前只有环境巡检，直接进入下一页
        if (inspect.inspectTypeName === '环境巡检') {
          this.$router.push({path: '/home/inspection/log-type', query: {typeId: inspect.inspectTypeId, typeName: inspect.inspectTypeName}})
        }
      }
    })
  },
  filters: {
    // 对巡检名称后缀进行处理
    nameSuffix(name) {
      let suffix = '巡检'
      return name.endsWith(suffix) ? name : (name + suffix)
    },
    // 根据
    nameImg(name) {
      let imgAddress = {
        'basic': '/images/inspect-enviroment.png',
        '环境巡检': '/images/inspect-enviroment.png'
      }
      return imgAddress[name] ? imgAddress[name] : imgAddress['basic']
    }
  },
  methods: {
    goLogType(type) {
      this.$router.push({path: '/home/inspection/log-type', query: {typeId: type.inspectTypeId, typeName: type.inspectTypeName}})
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.log-panel {
  position: relative;
  margin: 0 0 20px 0;
  padding: 30px 15px 60px 15px;
  min-height: 450px;
  background-color: #fff;
  .panel-bread {
    margin-top: 5px;
    margin-bottom: 15px;
    padding: 6px 15px;
    background-color: #eee;
  }
  .inspect-item {
    text-align: center;
    padding: 15px 0;
    .inspect-logo {
      width: 60px;
    }
    .inspect-name {
      font-weight: bold;
      padding: 6px 0 0 0;
    }
    .inspect-info {
      padding: 0 15px 0 15px;
    }
  }
}
  .log-panel /deep/ {
    .ivu-card {
      cursor: pointer;
      .ivu-card-body {
        padding: 0;
      }
    }
  }
</style>
